<template>
  <div id="userLayout" class="w-full h-full relative">
    <div
        class="rounded-lg flex items-center justify-evenly w-full h-full bg-white md:w-screen md:h-screen md:bg-[#194bfb]">
      <div class="md:w-3/5 w-10/12 h-full flex items-center justify-evenly">
        <div class="oblique h-[130%] w-3/5 bg-white transform -rotate-12 absolute -ml-52"/>
        <!-- 分割斜块 -->
        <div class="z-[999] pt-12 pb-10 md:w-96 w-full  rounded-lg flex flex-col justify-between box-border">
          <div>
            <div class="flex items-center justify-center">
              <img class="w-24" src="@/assets/logo.png" alt>
            </div>
            <div class="mb-9">
              <p class="text-center text-4xl font-bold">{{ $GIN_VUE_ADMIN.appName }}</p>
              <p class="text-center text-sm font-normal text-gray-500 mt-2.5">
              </p>
            </div>
            <el-form ref="loginForm" :model="loginFormData" :rules="rules" :validate-on-rule-change="false"
                     @keyup.enter="submitForm">
              <el-form-item prop="account" class="mb-6">
                <el-input v-model="loginFormData.account" size="large" placeholder="请输入用户名" suffix-icon="user"/>
              </el-form-item>
              <el-form-item prop="password" class="mb-6">
                <el-input v-model="loginFormData.password" show-password size="large" type="password"
                          placeholder="请输入密码"/>
              </el-form-item>

              <el-form-item class="mb-6">
                <el-button class="shadow shadow-blue-600 h-11 w-full" type="primary" size="large" @click="submitForm">登
                  录
                </el-button>
              </el-form-item>
              <el-form-item class="mb-6">
                <!-- <el-button class="shadow shadow-blue-600 h-11 w-full" type="primary" size="large"
                  @click="checkInit">前往初始化</el-button> -->

              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <!-- <div class="hidden md:block w-1/2 h-full float-right bg-[#194bfb]"><img class="h-full"
          src="@/assets/login_right_banner.jpg" alt="banner"></div> -->
    </div>

    <!-- <BottomInfo class="left-0 right-0 absolute bottom-3 mx-auto  w-full z-20">
      <div class="links items-center justify-center gap-2 hidden md:flex">
        <a href="http://doc.henrongyi.top/" target="_blank">
          <img src="@/assets/docs.png" class="w-8 h-8" alt="文档">
        </a>
        <a href="https://support.qq.com/product/371961" target="_blank">
          <img src="@/assets/kefu.png" class="w-8 h-8" alt="客服">
        </a>
        <a href="https://github.com/flipped-aurora/gin-vue-admin" target="_blank">
          <img src="@/assets/github.png" class="w-8 h-8" alt="github">
        </a>
        <a href="https://space.bilibili.com/322210472" target="_blank">
          <img src="@/assets/video.png" class="w-8 h-8" alt="视频站">
        </a>
      </div>
    </BottomInfo> -->
  </div>
</template>


<script setup>
import {reactive, ref} from 'vue'
import {ElMessage} from 'element-plus'
import {useUserStore} from '@/pinia/modules/user'
import router from '@/router'
import $GIN_VUE_ADMIN from "../../core/config";


defineOptions({
  name: 'Login',
})

// 验证函数
const checkUsername = (rule, value, callback) => {
  if (value.length < 5) {
    return callback(new Error('请输入正确的用户名'))
  } else {
    callback()
  }
}
const checkPassword = (rule, value, callback) => {
  if (value.length < 6) {
    return callback(new Error('请输入正确的密码'))
  } else {
    callback()
  }
}


// 登录相关操作
const loginForm = ref(null)
const loginFormData = reactive({
  account: 'admin',
  password: '123456',
  captcha: '',
  captchaId: '',
  openCaptcha: false,
})
const rules = reactive({
  account: [{validator: checkUsername, trigger: 'blur'}],
  password: [{validator: checkPassword, trigger: 'blur'}],
})

const userStore = useUserStore()
const login = async () => {
  return await userStore.LoginIn(loginFormData)
}
const submitForm = () => {
  loginForm.value.validate(async (v) => {
    if (v) {
      const flag = await login()
      if (flag) {
        router.push('/layout/dashboard')
      }

    } else {
      ElMessage({
        type: 'error',
        message: '请正确填写登录信息',
        showClose: true,
      })
      return false
    }
  })
}

</script>
